<template>
	<div class="view-sideMenu">
		<div ref="sideMenu" class="side-bar flex flex-direction-v" :class="{'show':isShowSideBar}">
			<div class="user-info flex">
				<div class="item-left">
					<img class="userImg" src="../../../static/img/user/head-portrait.png" />
				</div>
				<div class="item-right">
					<h5 class="user-name">晓幻大世界</h5>
					<span class="user-level">
						Lv.99
					</span>
				</div>
			</div>
			<div class="side-main flex-1">
				<div class="side one">
					<mt-cell title="我的背包" value="没有可用的物品" is-link>
						<i slot="icon" class="iconfont icon-beibao"></i>
					</mt-cell>
					<div class="mint-cell-wrap mint-cell" @click="goPage('message')">
						<mt-cell title="我的消息" is-link>
							<i slot="icon" class="iconfont icon-xiaoxi"></i>
						</mt-cell>
					</div>
					<mt-cell title="我的直播间" is-link>
						<i slot="icon" class="iconfont icon-maike"></i>
					</mt-cell>
					<mt-cell title="我的相册" is-link>
						<i slot="icon" class="iconfont icon-xiangce"></i>
					</mt-cell>
				</div>
				<div class="side two">
					<mt-cell title="扫一扫" value="扫码登录点这里" is-link>
						<i slot="icon" class="iconfont icon-saoyisao"></i>
					</mt-cell>
					<mt-cell title="熊猫小店" is-link>
						<i slot="icon" class="iconfont icon-xiaodian"></i>
					</mt-cell>
					<mt-cell title="免流量观看" is-link>
						<i slot="icon" class="iconfont icon-shangxiajia"></i>
					</mt-cell>
					<mt-cell title="礼包兑换" is-link>
						<i slot="icon" class="iconfont icon-youhuiquanlibao"></i>
					</mt-cell>
				</div>
				<div class="side three">
					<mt-cell title="观看历史" is-link>
						<i slot="icon" class="iconfont icon-shengyugeshu"></i>
					</mt-cell>
					<mt-cell title="消费记录" is-link>
						<i slot="icon" class="iconfont icon-xiaofei-copy"></i></mt-cell>
					<mt-cell title="竞猜记录" is-link>
						<i slot="icon" class="iconfont icon-jilu"></i>
					</mt-cell>
				</div>
				<div class="side four">
					<mt-cell title="设置" is-link>
						<i slot="icon" class="iconfont icon-shezhi"></i>
					</mt-cell>
				</div>
			</div>
		</div>
		<div ref="sideMask" v-show="isShowMask" @click="closeSideMenu" class="side-mask"></div>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import util from '@/util/Util';

	export default {
		name: 'SideMenu',
		data() {
			return {
				// sideMask的opacity
				sideMaskOpacityReset: 0.5,
				sideMaskOpacity: 0.5,
			}
		},
		mounted() {
			let vm = this;
			let sideMenu = vm.$refs.sideMenu;
			// 给侧边栏加上过渡动效
			Transform(sideMenu);
			// 初始化侧边栏位置
			sideMenu.translateX = -sideMenu.offsetWidth;
			new AlloyTouch({
				touch: sideMenu,
				preventDefault: false,
				touchStart: function(evt, value) {
					this.myVertical = false;
					this.start_page_x = evt.touches[0].pageX;
					this.start_time = new Date();
				},
				pressMove: function(evt, value) {
					sideMenu.style.transition = 'none';
					// 竖滑时阻止侧滑
					if(Math.abs(evt.deltaY) > 10) {
						this.myVertical = true;
					}
					if(!this.myVertical) {
						sideMenu.translateX += evt.deltaX;
						vm.sideMaskOpacity += (evt.deltaX / sideMenu.offsetWidth) * vm.sideMaskOpacityReset;
						vm.$refs.sideMask.style.backgroundColor = 'rgba(0,0,0,' + vm.sideMaskOpacity + ')';
						// 超过初始化位置，阻止右滑
						if(sideMenu.translateX > 0) {
							sideMenu.translateX = 0;
							vm.sideMaskOpacity = vm.sideMaskOpacityReset;
						}
					}
				},
				touchEnd: function(evt, value) {
					this.myVertical = false;
					this.end_page_x = evt.changedTouches[0].pageX;
					this.end_time = new Date();
					// 侧滑超过侧边栏一半宽度隐藏侧边栏，否则侧边栏恢复到初始化位置
					if(sideMenu.translateX < -sideMenu.offsetWidth / 2) {
						vm.closeSideMenu();
					} else if(this.end_time - this.start_time < 300 && this.start_page_x - this.end_page_x > 10) {
						vm.closeSideMenu();
					} else {
						sideMenu.style.transition = 'transform .2s';
						sideMenu.translateX = 0;
						vm.$refs.sideMask.style.backgroundColor = 'rgba(0,0,0,' + vm.sideMaskOpacityReset + ')';
					}
					vm.sideMaskOpacity = vm.sideMaskOpacityReset;
				},
			})
		},
		computed: {
			...mapState({
				isShowSideBar: state => state.sideMenu.isShowSideBar,
				isShowMask: state => state.sideMenu.isShowMask,
			}),
		},
		watch: {
			isShowSideBar() {
				let vm = this;
				if(vm.isShowSideBar) {
					vm.openSideMenu();
				} else {
					vm.closeSideMenu();
				}
			}
		},
		beforeDestroy() {
			let vm = this;
			vm.closeSideMenu();
		},
		methods: {
			...mapMutations([
				'SHOW_SIDEBAR',
			]),
			goPage(page) {
				let vm = this;
				util.goPage(vm, page);
			},
			// 显示侧边栏
			openSideMenu() {
				let vm = this;
				let sideMenu = vm.$refs.sideMenu;
				sideMenu.translateX = 0;
				sideMenu.style.transition = 'transform .2s';
				vm.$refs.sideMask.style.backgroundColor = 'rgba(0,0,0,' + vm.sideMaskOpacityReset + ')';
				vm.SHOW_SIDEBAR({
					'isShowSideBar': true,
					'isShowMask': true
				})
			},
			// 隐藏侧边栏
			closeSideMenu() {
				let vm = this;
				let sideMenu = vm.$refs.sideMenu;
				sideMenu.translateX = -sideMenu.offsetWidth;
				sideMenu.style.transition = 'transform .2s';
				vm.$refs.sideMask.style.backgroundColor = 'rgba(0,0,0,' + vm.sideMaskOpacityReset + ')';
				vm.SHOW_SIDEBAR({
					'isShowSideBar': false,
					'isShowMask': false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-sideMenu {
		.side-bar {
			position: absolute;
			min-width: 260px;
			width: 75%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			background-color: #f5f5f5;
			z-index: 20;
			&.show {}
			.user-info {
				min-width: 270px;
				padding: 20px;
				background-color: white;
				overflow: hidden;
				.item-left {
					.userImg {
						position: relative;
						top: 0;
						width: 40px;
						height: 40px;
						object-fit: cover;
						border-radius: 50%;
					}
				}
				.item-right {
					margin: 0 8px;
					.user-name {
						font-size: 16px;
						color: #333333;
						font-weight: normal;
					}
					.user-level {
						font-size: 10px;
						background-color: #ffefec;
						color: #ff8e3a;
						border: 1px solid #ffd5bc;
						border-radius: 3px;
						padding: 1px 2px;
					}
				}
			}
		}
		.side-main {
			width: 99.9%;
			overflow-x: hidden;
			overflow-y: auto;
		}
		.side {
			min-width: 270px;
			margin-top: 15px;
			overflow: hidden;
			background-color: white;
			&.one {
				.iconfont {
					color: #8d8be3 !important;
				}
			}
			&.two {
				.iconfont {
					color: #39d8a7 !important;
				}
			}
			&.three {
				.iconfont {
					color: #6bcdfb !important;
				}
			}
			&.four {
				.iconfont {
					color: #cccccc !important;
				}
			}
			.mint-cell-wrap {
				.mint-cell {
					width: 100%;
					margin: 0 auto;
				}
			}
			.mint-cell {
				width: 94%;
				margin: 0 auto;
			}
			.iconfont {
				position: relative;
				top: 2px;
				color: #333333;
			}
			.icon-beibao {
				font-size: 15px;
			}
			.icon-xiaoxi {
				font-size: 15px;
			}
			.icon-shengyugeshu {
				top: 4px;
				left: 2px;
				margin-left: -4px;
				font-size: 20px;
			}
			.icon-xiaofei-copy {
				top: 4px;
				left: 1px;
				margin-left: -1px;
				font-size: 18px;
			}
			.icon-shezhi {
				top: 3px;
				font-size: 14px;
			}
		}
		.side-mask {
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .5);
			z-index: 15;
		}
	}
</style>

<style lang="scss">
	.view-sideMenu {
		.side {
			margin-top: 15px;
			.mint-cell {
				border-bottom: 1px solid #eeeeee;
				&:last-child {
					border-bottom: 0;
				}
			}
			.mint-cell-wrapper {
				background-image: none;
				.mint-cell-value {
					color: #999999;
					font-size: 13px !important;
				}
			}
		}
	}
</style>